<template>
  <div class="sim-search-box">
    <input class="search-txt" type="text" name="oasis-search" placeholder="Type to search" v-model="input" @keyup.13="goSearch"/>
    <a class="search-btn" @click="goSearch" :href="search">
      <i class="fas fa-search"></i>
    </a>
  </div>
</template>

<script>
export default {
  name: 'SimSearchBox',
  props: {

  },
  data() {
    return {
      input: ''
    };
  },
  computed: {
    search() {
      const input = this.input.trim();
      if (input.length > 0) {
        return '/#/search' + '?str=' + input;
      }
      return '#';
    }
  },
  created() {

  },
  mounted() {
    this.input = this.$route.query.str ?? '';
  },
  watch: {

  },
  methods: {
    goSearch() {
      const input = this.input.trim();
      if (input == this.$route.query.str) {
        alert('input duplicated')
        console.log('input duplicated');
      }
      if (input.length > 0) {
        this.$router.push({
          path: '/search',
          query: {
            str: input
          }
        });
      }
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
  .sim-search-box {
    background: #ffffff;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

    .search-txt {
      border: none;
      background: none;
      outline: none;
      float: left;
      padding: 0;
      color: #2f3640;
      font-size: 16px;
      line-height: 40px;
      padding: 0 6px;
      width: 300px;
      
      transition: width ease-in-out .25s;
      
      @media screen and (min-width: 961px){
        width: 540px;
      }

      @media screen and (max-width: 500px){
        width: 60vw;
      }

      &:-internal-autofill-selected {
        background-color: rgba(255, 255, 255, 0) !important;
      }

    }

    .search-btn {
      color: #e84118;
      float: right;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #2f3640;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      // transition: font-size ease-in-out .25s, background-color ease-in-out .25s;

      &:hover {
        font-size: 20px;
        background-color: #001122c5;
        color: #ff4314;
      }
    }

    

    &:hover, &:focus-within {
      -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
      border-color:rgb(40, 89, 104);
      -webkit-box-shadow:0 0 8px rgb(217, 255, 0);
    }
  }
</style>
